<template>
  <div class="map-container">
    <div ref="mapContainer" class="map"></div>
    <button @click="startNavigation">开始导航</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      marker: null, // 用于显示用户位置的标记
      destination: { latitude: 39.909604, longitude: 116.397228 }, // 目标地的经纬度
      navigationStarted: false,
    };
  },
  mounted() {
    this.loadAMap(); // 动态加载高德地图 API
  },
  methods: {
    loadAMap() {
      const script = document.createElement('script');
      script.src = 'https://webapi.amap.com/maps?v=2.0&key=328fb1e371fa14d7efefc47f560039d3'; // 替换为你的 API Key
      script.onload = this.initMap; // 加载完成后初始化地图
      document.head.appendChild(script);


    },
    initMap() {
      // 初始化高德地图
      this.map = new AMap.Map(this.$refs.mapContainer, {
        zoom: 15, // 地图缩放级别
        center: [116.397228, 39.909604], // 初始地图中心点（可以是一个默认值）
      });

      // 添加地图控件
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation'], () => {
        this.map.addControl(new AMap.ToolBar());
        this.map.addControl(new AMap.Scale());

        // 初始化标记并添加到地图
        this.marker = new AMap.Marker({
          map: this.map,
          position: [116.397228, 39.909604], // 初始位置（可以是默认值）
        });


        // 获取当前位置并定位
        this.getCurrentPosition();
      });
    },
    getCurrentPosition() {
      // 使用高德地图的定位插件获取用户当前位置
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, // 是否使用高精度定位
        timeout: 10000, // 超时时间
        buttonPosition: 'RB', // 定位按钮的位置
        panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
        zoomToAccuracy: true,    //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        showCircle: false,
      });

      this.map.addControl(geolocation); // 将定位控件添加到地图

      geolocation.getCurrentPosition((status, result) => {
        if (status === 'complete' && result.position) {
          // 定位成功，更新地图中心点为当前定位点
          const position = result.position;
          this.map.setCenter(position);

          if (this.marker) {
            this.marker.setPosition(position); // 更新标记的位置
            this.marker.setLabel({
              content: `(${position.lat.toFixed(6)}, ${position.lng.toFixed(6)})`,
              offset: new AMap.Pixel(0, -30), // 调整标签的位置
            });
          }
        } else {
          alert('定位失败，请重试');
        }
      });
    },
    startNavigation() {
      if (this.navigationStarted) {
        alert("导航已开始");
        return;
      }

      // 开始导航
      this.calculateRoute();
    },
    calculateRoute() {
      // 使用高德地图的驾车路线规划（可以改成步行或公交等）
      const driving = new AMap.Driving({
        map: this.map,
        panel: 'panel' // 用于显示路线详情的面板（可选）
      });

      driving.search({
        origin: this.marker.getPosition(), // 起点为用户当前位置
        destination: [this.destination.longitude, this.destination.latitude], // 目标地点
      }, (status, result) => {
        if (status === 'complete') {
          console.log('路线规划成功', result);
        } else {
          alert('路线规划失败，请重试');
        }
      });
    },
  },
};
</script>

<style scoped>
.map-container {
  position: relative;
  height: 90vh;
}
.map {
  width: 100%;
  height: 100%;
}
button {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}
</style>
